<template>
	<view class="root">
		<view class="main">
			<view
				v-for="(section, index) in views"
				:key="index"
				class="section mt-24 fs-32"
			>
				<view
					v-for="item in section"
					:key="item.name"
					class="item bgc-fff mb-2 fd-row"
				>
					<text class="title color-333">{{ item.title }}</text>

					<picker
						v-if="item.range"
						mode="selector"
						:range="item.range"
						range-key="name"
						class="f1 ml-50"
						@change="changePicker(item.name, item.range, $event)"
					>
						<label>
							<input
								class="f1 input fs-32 color-333"
								placeholder-class="color-999"
								v-model="model[item.name].value"
								:disabled="true"
								:placeholder="item.placeholder"
							/>
							<image
								class="width-16 height-26"
								src="/static/images/icon-toRight.png"
								mode="aspectFit"
							/>
						</label>
					</picker>
					<input
						v-else
						class="f1 input ml-50 fs-32 color-333"
						placeholder-class="color-999"
						v-model="model[item.name].value"
						:disabled="item.range"
						:type="item.type"
						:placeholder="item.placeholder"
						:maxlength="item.maxlength"
					/>
				</view>
			</view>
		</view>

		<button
			hover-class="tap-hover"
			class="btn-add lh-90 br-44 color-fff fs-30"
			@click="submit"
		>
			确认添加
		</button>
	</view>
</template>

<script lang="ts">
	import Vue from "vue";
	import Component from "vue-class-component";

	@Component
	export default class addBankCard extends Vue {
		// component property

		model: AnyObject = {
			cardNumber: {
				value: "",
				data: null,
			},
			cardType: {
				value: "",
				data: null,
			},
			realName: {
				value: "",
			},
			certificateType: {
				value: "",
				data: null,
			},
			certificateNumber: {
				value: "",
				data: null,
			},
			phoneNumber: {
				value: "",
				data: null,
			},
		};

		ranges: AnyObject = {
			bank_type: "",
			certificates_type: "",
		};

		get views(): AnyObject[] {
			return [
				[
					{
						name: "cardNumber",
						title: "卡号",
						maxlength: 30,
						type: "number",
						placeholder: "请输入银行卡号",
					},
					{
						name: "cardType",
						title: "卡类型",
						placeholder: "请选择银行卡类型",
						range: this.ranges.bank_type,
					},
				],
				[
					{
						name: "realName",
						title: "姓名",
						placeholder: "持卡人姓名",
					},
					{
						name: "certificateType",
						title: "证件类型",
						placeholder: "请选择证件类型",
						range: this.ranges.certificates_type,
					},
					{
						name: "certificateNumber",
						title: "证件号",
						maxlength: 30,
						type: "number",
						placeholder: "请输入证件号",
					},
					{
						name: "phoneNumber",
						title: "手机号码",
						maxlength: 11,
						type: "number",
						placeholder: "银行预留手机号码",
					},
				],
			];
		}

		onLoad() {
			this.request.get("/employee/bankInfo").then(({ data }) => {
				this.ranges = data;
			});
		}

		changePicker(modelName: string, range: AnyObject[], e: AnyObject): void {
			this.model[modelName] = {
				value: range[e.detail.value].name,
				data: range[e.detail.value].code,
			};
		}

		submit() {
			const params = Object.keys(this.model).map((key) => [
				[key],
				this.model[key].data ?? this.model[key].value,
			]);

			this.request
				.get("/employee/bankInfoHandle", Object.fromEntries(params))
				.then(({ msg: title }) =>
					uni.showToast({
						title,
						success: () => setTimeout(uni.navigateBack, 1500),
					})
				);
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.root {
		.item {
			height: 120rpx;
			line-height: 120rpx;
			padding: 0 40rpx;
			.title {
				width: 132rpx;
			}
			input {
				height: 120rpx;
			}
		}

		.btn-add {
			background-image: linear-gradient(-90deg, #1ba0ff, #2857ff);
			margin: 50rpx 30rpx;
		}
	}
</style>